{% extends "manage.html" %}
{% load static %}

{% block title %}Add/Edit Quiz{% endblock %}

{% block subtitle %}Add/Edit Quiz{% endblock %}

{% block css %}

<link rel="stylesheet" href="{% static 'yaksh/css/jquery.datetimepicker.css' %}" type="text/css" />
{% endblock %}
{% block script %}

<script src="{% static 'yaksh/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'yaksh/js/add_quiz.js' %}"></script>
<script src="{% static 'yaksh/js/jquery.datetimepicker.full.min.js' %}"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#id_start_date_time").datetimepicker({format: 'Y-m-d H:i:s'});
    $("#id_end_date_time").datetimepicker({format: 'Y-m-d H:i:s'});
  });
</script>

{% endblock %}
{% block onload %} onload="javascript:test();"  {% endblock %}
{% block content %}
<div class="container">
  {% if messages %}
    {% for message in messages %}
    <div class="alert alert-dismissible alert-{{ message.tags }}">
        <button type="button" class="close" data-dismiss="alert">
            <i class="fa fa-close"></i>
        </button>
        <strong>{{ message }}</strong>
    </div>
    {% endfor %}
  {% endif %}
  <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
    <i class="fa fa-arrow-left"></i>&nbsp;Back
  </a>
  <br><br>
  <form name=frm id=frm action="" method="post" >
    {% csrf_token %}
    <center>
      <table class="table table-responsive-sm">
      {{ form.as_table }}
      </table>
      <br/>
      <button class="btn btn-success btn-lg" id="submit" name="questionpaper">
        <i class="fa fa-save">&nbsp;Save</i>
      </button>
    </center>
  </form>
  <br>
  {% if quiz and course_id %}
      {% if quiz.questionpaper_set.get.id %}
      <center>
        <a href="{% url 'yaksh:designquestionpaper' quiz.id quiz.questionpaper_set.get.id course_id %}" class="btn btn-primary">
          <i class="fa fa-edit"></i> Edit Question Paper
        </a>
        <a href="{% url 'yaksh:preview_questionpaper' quiz.questionpaper_set.get.id %}" class="btn btn-info" target="_blank">
          <i class="fa fa-eye"></i> Preview Question Paper
        </a>
        <br>
        <br>
        <h4>You can check the quiz by attempting it in the following modes:</h4>
          <a class="btn btn-outline-info" name="button" href="{% url 'yaksh:test_quiz' 'usermode' quiz.id course_id %}" target="blank">
            User Mode
          </a>

          <a class="btn btn-outline-info" name="button" href="{% url 'yaksh:test_quiz' 'godmode' quiz.id course_id %}" target="blank">
            God Mode
          </a>
        <a data-toggle="modal" data-target="#help">
        <span class="text-info"><i class="fa fa-info-circle"></i> Help</span></a>
      </center>
      {% endif %}
  {% endif %}
</div>
<div class="modal" id="help">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Quiz Test Modes</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="fa fa-close"></i></span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          <b>User Mode:</b> Attempt quiz the way normal users will attempt i.e. -
              <ul class="list-group list-group-flush">
                <li class="list-group-item">Quiz will have the same duration as that of the original quiz.</li>
                <li class="list-group-item">Quiz won't start if the course is inactive or the quiz time has expired.</li>
                <li class="list-group-item">You will be notified about quiz prerequisites.(You can still attempt the quiz though)</li>
              </ul>
          <b>God Mode:</b> Attempt quiz without any time or eligibilty constraints.
        </p>
      </div>
    </div>
  </div>
</div>
{% endblock %}
